

<!DOCTYPE HTML>
<html>
<head>
    <link href="form.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="zepto.js"></script>
    <script type="text/javascript">


        function submitForm () {

            var array = $('form[name=user_info]').serializeArray();

           var name;
           var email;
           var website;
           var comment;
           var gender;


           $.each(array, function (index , value) {
               if(value.name == "name"){
                   name = value.value;
               }else if(value.name == "email"){
                   email = value.value;
               }else if(value.name == "website"){
                   website = value.value;
               }else if(value.name == "comment"){
                   comment = value.value;
               }else if(value.name == "gender"){
                   gender = value.value;
               }
           })



            var enable = true;

           if(isEmpty(name)){
               alert(name);
               $('#name_err').html('* 姓名不能为空')
               enable = false;
           }else {
               $('#name_err').html('* ')
           }

           if(isEmpty(email)){
               $('#email_err').html('* 邮箱不能为空')
               enable = false;
           }else {
               $('#email_err').html('* ')
           }

           if(isEmpty(gender)){
               $('#gender_err').html('* 请选择性别');
               enable = false;
           }else {
               $('#gender_err').html('* ')
           }


           if(enable){
               console.log("提交数据");
               $.post('/ajax_form_output.php', {
                   name : name,
                   email : email,
                   website : website,
                   comment : comment,
                   gender : gender
               }, function (data) {
                   console.log(data);
                   if($.isPlainObject(data)){
                       if(data.res == "success"){
                           alert("提交成功" + data.data);
                       }else {
                           alert(data.err);
                       }
                   }else {
                       alert("提交失败")
                   }
               })
           }
        }

        function isEmpty(str) {
            return str == null ||
                str == undefined ||
                typeof str != 'string' ||
                str.constructor != String ||
                str.length == 0;
        }

    </script>
</head>
<body>




<h2>PHP 验证实例</h2>
<form name="user_info" enctype="multipart/form-data" method="post">
    姓名：<input type="text" name="name"><span id="name_err" class="error"> *</span>
    <br><br>
    电邮：<input type="text" name="email"><span id="email_err" class="error"> * </span>
    <br><br>
    网址：<input type="text" name="website">
    <br><br>
    评论：<textarea name="comment" rows="5" cols="40"></textarea>
    <br><br>
    性别：
    <input type="radio" name="gender" value="female">女性
    <input type="radio" name="gender" value="male">男性 <span id="gender_err" class="error"> * </span>
    <br><br>
    上传文件：<input type="file" name="file" id="file">
    <br>
    <input type="button" name="submit" value="提交" onclick="submitForm()">
</form>

</body>
</html>